<script setup>
import { getMsgTemplatePage, addMsgTemplate, updateMsgTemplate, updateMsgTemplateStatus, deleteMsgTemplate } from '@/api/system'
import { getDateTimeStr } from '@/utils/formatDate'
// 每页展示数据条目
const PAGE_SIZE = 10
// 分页查询参数
const pageMsg = ref({
  pageNum: 1,
  pageSize: PAGE_SIZE,
  createTimeStartAndEnd: [new Date(2024, 0, 1), new Date(2025, 0, 1)],
  status: null
})
// 分页查询结果
const msgTemplatePageList = ref([])
// 分页查询条目总数
const msgTemplatePageTotal = ref(0)
// 表格行选择器
const rowSelection = ref({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
})

// 进入页面后进行一次查询展示
onMounted(async () => {
  await getTableData()
})

// 展示的表格数据
const tableData = ref([])
// 把查询结果映射到表格
const resMsgToTableData = () => {
  tableData.value = []
  for (let i = 0; i < msgTemplatePageList.value.length; i++) {
    const tempObj = {
      key: msgTemplatePageList.value[i].id,
      tableIndex: i + 1 + PAGE_SIZE * (pageMsg.value.pageNum - 1),
      msgTemplateType: msgTemplatePageList.value[i].type,
      msgTemplateName: msgTemplatePageList.value[i].name,
      msgTemplateTemp: msgTemplatePageList.value[i].template,
      createTime: getDateTimeStr(msgTemplatePageList.value[i].createTime),
      status: msgTemplatePageList.value[i].status
    }
    tableData.value.push(tempObj)
  }
}

// 修改页码
const pageChange = async (pageNum) => {
  pageMsg.value.pageNum = pageNum
  getTableData()
}

// 查询
const getTableData = async () => {
  const tempRes = await getMsgTemplatePage(pageMsg.value)
  msgTemplatePageList.value = tempRes.list
  msgTemplatePageTotal.value = +tempRes.total
  resMsgToTableData()
}

// 新增模板对话框可见状态
const addMsgTemplateVisible = ref(false)
// 新增模板对话框表单数据
const addMsgTemplateForm = ref({
  msgTemplateType: "",
  msgTemplateTemp: "",
  msgTemplateName: "",
  keyWords: null
})
// 提取模板体中的关键字
function getKeyWords (str) {
  const matches = str.match(/\$\{([^}]+)\}/g)
  let keyWords = []
  if (matches) keyWords = matches.map(match => match.slice(2, -1))
  const isPass = !keyWords.some(key => /^\d/.test(key))
  return { isPass, keyWords }
}
// 新增模板表单元素
const addMsgTemplateFormDom = ref()
// 对新增模板数据进行校验和赋值
const addMsgTemplateBeforeOk = async () => {
  let isPass = true
  await addMsgTemplateFormDom.value.validate().then(res => {
    if (res) {
      isPass = false
    }
  })
  return isPass
}
// 提交新增模板表单数据
const addMsgTemplateOk = async () => {
  await addMsgTemplate(addMsgTemplateForm.value)
  addMsgTemplateFormDom.value.resetFields()
  addMsgTemplateFormDom.value.clearValidate()
  await getTableData()
}
// 取消新增
const addMsgTemplateCancel = () => {
  addMsgTemplateFormDom.value.resetFields()
  addMsgTemplateFormDom.value.clearValidate()
}

// 修改模板对话框可见状态
const updateMsgTemplateVisible = ref(false)
// 修改模板对话框表单数据
const updateMsgTemplateForm = ref({
  // 下面是需要提交的数据
  id: 0,
  msgTemplateType: "",
  msgTemplateTemp: "",
  msgTemplateName: "",
  status: 1,
  keyWords: [],
  // 下面是初始数据，用于判断是否修改
  oldMsgTemplateType: "",
  oldMsgTemplateTemp: "",
  oldMsgTemplateName: "",
})
// 修改模板表单元素
const updateMsgTemplateFormDom = ref()
// 弹出修改模板对话框
const updateMsgTemplateModal = (data) => {
  updateMsgTemplateForm.value.id = data.key
  updateMsgTemplateForm.value.msgTemplateType = data.msgTemplateType
  updateMsgTemplateForm.value.msgTemplateTemp = data.msgTemplateTemp
  updateMsgTemplateForm.value.msgTemplateName = data.msgTemplateName
  updateMsgTemplateForm.value.keyWords = getKeyWords(data.msgTemplateTemp)
  updateMsgTemplateForm.value.oldMsgTemplateType = data.msgTemplateType
  updateMsgTemplateForm.value.oldMsgTemplateTemp = data.msgTemplateTemp
  updateMsgTemplateForm.value.oldMsgTemplateName = data.msgTemplateName
  updateMsgTemplateVisible.value = true
}
// 对修改模板数据进行校验和赋值
const updateMsgTemplateBeforeOk = async () => {
  let isPass = true
  await updateMsgTemplateFormDom.value.validate().then(res => {
    if (res) {
      isPass = false
    }
  })
  return isPass
}
// 提交修改模板表单数据
const updateMsgTemplateOk = async () => {
  await updateMsgTemplate(updateMsgTemplateForm.value)
  updateMsgTemplateFormDom.value.resetFields()
  updateMsgTemplateFormDom.value.clearValidate()
  await getTableData()
}
// 取消修改
const updateMsgTemplateCancel = () => {
  updateMsgTemplateFormDom.value.resetFields()
  updateMsgTemplateFormDom.value.clearValidate()
}

// 开关修改状态
const switchChange = async (data) => {
  await updateMsgTemplateStatus({
    id: data.key,
    keyWords: getKeyWords(data.msgTemplateTemp),
    status: data.status ? 0 : 1
  })
  data.status = data.status ? 0 : 1
}

// 删除模板对话框可见状态
const deleteMsgTemplateVisible = ref(false)
// 弹出删除模板对话框
const deleteMsgTemplateModal = (data) => {
  deleteMsgTemplateIds.value.push(data.key)
  deleteMsgTemplateVisible.value = true
}
// 删除模板的ids
const deleteMsgTemplateIds = ref([])
// 多选框选中的ids
const selectedMsgTemplateIds = ref([])
// 批量删除
const deleteMsgTemplateBatch = () => {
  deleteMsgTemplateIds.value = selectedMsgTemplateIds.value
  deleteMsgTemplateVisible.value = true
}
// 提交删除模板
const deleteMsgTemplateOk = async () => {
  await deleteMsgTemplate(deleteMsgTemplateIds.value)
  deleteMsgTemplateIds.value = []
  await getTableData()
}
</script>

<template>
  <!-- 新增模板对话框 start -->
  <a-modal v-model:visible="addMsgTemplateVisible" @ok="addMsgTemplateOk"
    :on-before-ok="addMsgTemplateBeforeOk" @cancel="addMsgTemplateCancel" title="新增模板">
    <a-form :model="addMsgTemplateForm" ref="addMsgTemplateFormDom">
      <a-form-item field="msgTemplateType" label="模板类型"
        :rules="[{required:true,message:'模板类型不能为空'}]">
        <a-input v-model="addMsgTemplateForm.msgTemplateType" placeholder="请输入模板类型" />
      </a-form-item>
      <a-form-item field="msgTemplateName" label="模板名称"
        :rules="[{required:true,message:'模板名称不能为空'}]">
        <a-input v-model="addMsgTemplateForm.msgTemplateName" placeholder="请输入模板名称" />
      </a-form-item>
      <a-form-item field="msgTemplateTemp" label="模板体" :rules="[{required:true,message:'模板体不能为空'},
      {validator:(value,cb)=>{addMsgTemplateForm.keyWords=getKeyWords(value)
      addMsgTemplateForm.keyWords.isPass?cb():cb('关键字不能以数字开头')}}]">
        <a-input v-model="addMsgTemplateForm.msgTemplateTemp"
          placeholder='请输入模板体，如"这是模板体，${a}是关键字"' />
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- 新增模板对话框 end -->
  <!-- 修改模板对话框 start -->
  <a-modal v-model:visible="updateMsgTemplateVisible" @ok="updateMsgTemplateOk"
    :on-before-ok="updateMsgTemplateBeforeOk" @cancel="updateMsgTemplateCancel" title="修改模板">
    <a-form :model="updateMsgTemplateForm" ref="updateMsgTemplateFormDom">
      <a-form-item field="msgTemplateType" label="模板类型"
        :rules="[{required:true,message:'模板类型不能为空'}]">
        <a-input v-model="updateMsgTemplateForm.msgTemplateType" placeholder="请输入模板类型" />
      </a-form-item>
      <a-form-item field="msgTemplateName" label="模板名称"
        :rules="[{required:true,message:'模板名称不能为空'}]">
        <a-input v-model="updateMsgTemplateForm.msgTemplateName" placeholder="请输入模板名称" />
      </a-form-item>
      <a-form-item field="msgTemplateTemp" label="模板体" :rules="[{required:true,message:'模板体不能为空'},
      {validator:(value,cb)=>{updateMsgTemplateForm.keyWords=getKeyWords(value)
        updateMsgTemplateForm.keyWords.isPass?cb():cb('关键字不能以数字开头')}}]">
        <a-input v-model="updateMsgTemplateForm.msgTemplateTemp" placeholder="请输入模板体" />
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- 修改模板对话框 end -->
  <!-- 删除模板对话框 start -->
  <a-modal v-model:visible="deleteMsgTemplateVisible" @ok="deleteMsgTemplateOk"
    @cancel="deleteMsgTemplateIds=[]" title="删除模板">
    <div>你确定要删除该模板吗</div>
  </a-modal>
  <!-- 删除模板对话框 end -->
  <a-layout class="layout-demo">
    <a-layout-header>
      <!-- 查询参数输入区 start -->
      <div class="box">
        <span class="my-span">模板类型</span>
        <a-input placeholder="请输入模板类型" allow-clear class="my-input"
          v-model="pageMsg.msgTemplateType" />
      </div>
      <div class="box">
        <span class="my-span">模板名称</span>
        <a-input placeholder="请输入模板名称" allow-clear class="my-input"
          v-model="pageMsg.msgTemplateName" />
      </div>
      <div class="box">
        <span class="my-span">模板体</span>
        <a-input placeholder="请输入模板体" allow-clear class="my-input"
          v-model="pageMsg.msgTemplateTemp" />
      </div>
      <div class="box">
        <span class="my-span">创建时间</span>
        <a-range-picker class="my-input"
          style="width: 248px; border: 1px solid rgb(217, 217, 217); box-sizing: border-box;"
          v-model="pageMsg.createTimeStartAndEnd" :value-format="'Date'" />
      </div>
      <div class="box">
        <a-button class="my-btn" type="outline" @click="getTableData">查询</a-button>
      </div>
      <div class="box">
        <a-button class="my-btn" type="outline"
          @click="addMsgTemplateVisible=!addMsgTemplateVisible">新增</a-button>
      </div>
      <!-- 查询参数输入区 end -->
    </a-layout-header>
    <a-layout-content>
      <!-- 信息展示表格 start -->
      <a-table :data="tableData" class="my-table" :pagination="false" :row-selection="rowSelection"
        v-model:selectedKeys="selectedMsgTemplateIds">
        <template #columns>
          <a-table-column :align="'center'" title="序号" data-index="tableIndex" />
          <a-table-column :align="'center'" title="模板类型" data-index="msgTemplateType" />
          <a-table-column :align="'center'" title="模板名称" data-index="msgTemplateName" />
          <a-table-column :align="'center'" title="模板体" data-index="msgTemplateTemp" />
          <a-table-column :align="'center'" title="创建日期" data-index="createTime" />
          <!-- 状态开关，0是停用，1是启用-->
          <a-table-column :align="'center'" title="状态">
            <template #cell="record">
              <a-switch :checked-value="1" :unchecked-value="0"
                :default-checked="record.record.status ? true : false"
                @change="switchChange(record.record)" :checked-text="'启用'" :unchecked-text="'停用'" />
            </template>
          </a-table-column>
          <!-- 修改操作和删除操作 -->
          <a-table-column :align="'center'" title="操作">
            <template #cell=record>
              <a-button type="outline" @click="updateMsgTemplateModal(record.record)"
                style="margin-right:20px">修改</a-button>
              <a-button type="outline" @click="deleteMsgTemplateModal(record.record)">删除</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <!-- 信息展示表格 end -->
      <!-- 批量删除和分页器 -->
      <div>
        <a-button class="table-end-btn" type="outline"
          @click="deleteMsgTemplateBatch">批量删除</a-button>
        <a-pagination class="table-end-pagination" :total="msgTemplatePageTotal"
          :page-size="PAGE_SIZE" @change="pageChange" />
      </div>
    </a-layout-content>
    <a-layout-footer>Footer</a-layout-footer>
  </a-layout>
</template>

<style scoped>
.layout-demo :deep(.arco-layout-header) {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}

.layout-demo :deep(.arco-layout-header) .box {
  display: inline-block;
  margin: 12px 0;
}

.my-btn {
  margin-left: 12px;
}

.layout-demo :deep(.arco-layout-sider) {
  width: 206px;
}

.table-head-div {
  margin-top: 40px;
}

.my-table {
  margin: 64px 64px 0;
}

.table-end-btn,
.table-end-pagination {
  margin: 12px 64px;
}

.table-end-btn {
  float: left;
}

.table-end-pagination {
  float: right;
}

.my-span {
  margin: 0 12px;
}

.my-input {
  width: 128px;
  border: 1px solid #d9d9d9;
}
</style>